<template>
    <div class="main">
        <van-nav-bar
            :title="$t('m.Helpandsupport')"
            left-arrow
            @click-left="onClickLeft"
        />
        <a class="message-bar" href="https://m.me/happygogo.myanmar">
            <div class="inner-wraper">
                <img src="../../static/img/messager.png" alt="" style="width:35px;height:35px;">
                <span>{{$t('m.Facebookmessenger')}}</span>
                <img src="../../static/img/rightArrow.png" alt="" style="width:23px;height:23px;">
            </div>
        </a>
        <a class="message-bar" href="https://www.facebook.com/happygogo.myanmar">
            <div class="inner-wraper">
                <img src="../../static/img/facebook.png" alt="" style="width:35px;height:35px;">
                <span>{{$t('m.Facebook')}}</span>
                <img src="../../static/img/rightArrow.png" alt="" style="width:23px;height:23px;">
            </div>
        </a>
        <p class="phone">{{$t('m.Phone')}}</p>
        <a class="message-bar" @click="$router.push('/me/help')">
            <div class="inner-wraper">
                <img src="../../static/img/phone.png" alt="" style="width:25px;marginLeft:10px">
                <span>09967611168</span>
                <img src="../../static/img/rightArrow.png" alt="" style="width:23px;height:23px;">
            </div>
        </a>
        <a class="message-bar" @click="$router.push('/me/help')">
            <div class="inner-wraper">
                <img src="../../static/img/phone.png" alt="" style="width:25px;marginLeft:10px">
                <span>09951203008</span>
                <img src="../../static/img/rightArrow.png" alt="" style="width:23px;height:23px;">
            </div>
        </a>
    </div>


</template>
<script>
    export default {
        data() {
            return {
                start: ''
            }
        },
        methods: {
            onClickLeft() {
                this.$router.go(-1)
            },
        }
    }
</script>
<style scoped>
    .main{
        font-family: Zawgyi-One, Heslvetica Neue,Helvetica,Arial,sans-serif !important;
    }
    .message-bar {
        display:block;
        color:black;

        padding: 10px;
    }
    .message-bar .inner-wraper{
        display: flex;
        border-bottom: solid 1px rgba(0, 0, 0, .3);
        height: 40px;
        align-items: center;
    }

    .message-bar .inner-wraper span {
        flex: 1;
        margin-left: 10px;
    }

    .phone {
        padding: 10px;
        line-height: 20px;
        font-size: 14px;
        background: #F2F2F2;
        margin: 0;
    }

</style>
